<template>
    <div class="auth-container">
      <div class="auth-tabs">
        <span :class="{active: tab==='login'}" @click="tab='login'">登录</span>
        <span :class="{active: tab==='register'}" @click="tab='register'">注册</span>
      </div>
      <form v-if="tab==='login'" class="auth-form" @submit.prevent="handleLogin">
        <input v-model="loginForm.username" type="text" placeholder="用户名" required autocomplete="username" />
        <input v-model="loginForm.password" type="password" placeholder="密码" required autocomplete="current-password" />
        <button type="submit" :disabled="loginLoading">登录</button>
        <div class="auth-tip" v-if="loginError">{{loginError}}</div>
      </form>
      <form v-else class="auth-form" @submit.prevent="handleRegister">
        <input v-model="registerForm.username" type="text" placeholder="用户名" required />
        <input v-model="registerForm.email" type="email" placeholder="邮箱" required />
        <input v-model="registerForm.password" type="password" placeholder="密码" required />
        <input v-model="registerForm.confirmPassword" type="password" placeholder="确认密码" required />
        <div class="privacy">
          <input type="checkbox" v-model="agreePrivacy" id="privacy">
          <label for="privacy">
            我已阅读并同意
            <a href="javascript:;" @click="showPolicy=true">《隐私政策》</a>
          </label>
        </div>
        <button type="submit" :disabled="registerLoading || !agreePrivacy">注册</button>
        <div class="auth-tip" v-if="registerError">{{registerError}}</div>
      </form>
      <div v-if="showPolicy" class="policy-modal-mask" @click.self="showPolicy=false">
        <div class="policy-modal">
          <h3>隐私政策</h3>
          <div class="policy-content">
            <p>我们承诺保护您的个人信息，仅用于平台服务，不会泄露给第三方。注册即表示您同意我们的隐私政策和服务条款。</p>
            <p>1. 您的注册信息仅用于身份验证和服务体验优化。</p>
            <p>2. 您的数据不会被用于任何商业用途或泄露给第三方。</p>
            <p>3. 您有权随时注销账号并删除个人数据。</p>
          </div>
          <button @click="showPolicy=false">我已知晓</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  
  const tab = ref('login')
  const router = useRouter()
  
  // 登录
  const loginForm = ref({ username: '', password: '' })
  const loginLoading = ref(false)
  const loginError = ref('')
  
  async function handleLogin() {
    loginError.value = ''
    loginLoading.value = true
    try {
      // 假设后端登录接口为 /auth/login，返回 { userId, token }
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(loginForm.value)
      })
      const data = await res.json()
      if (data.code === 200) {
        localStorage.setItem('userId', data.userId)
        localStorage.setItem('token', data.data)
        router.push('/') // 登录成功跳转首页
      } else {
        loginError.value = data.message || '用户名或密码错误'
      }
    } catch (e) {
      loginError.value = '网络错误，请稍后重试'
    }
    loginLoading.value = false
  }
  
  // 注册
  const registerForm = ref({ username: '', email: '', password: '', confirmPassword: '' })
  const registerLoading = ref(false)
  const registerError = ref('')
  const agreePrivacy = ref(false)
  
  async function handleRegister() {
    registerError.value = ''
    if (registerForm.value.password !== registerForm.value.confirmPassword) {
      registerError.value = '两次输入的密码不一致'
      return
    }
    registerLoading.value = true
    try {
      // 假设后端注册接口为 /auth/register
      const res = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(registerForm.value)
      })
      const data = await res.json()
      if (data.code === 200) {
        localStorage.setItem('userId', data.userId)
        localStorage.setItem('token', data.token)
        router.push('/') // 注册成功跳转首页
      } else {
        registerError.value = data.message || '注册失败'
      }
    } catch (e) {
      registerError.value = '网络错误，请稍后重试'
    }
    registerLoading.value = false
  }
  
  // 隐私政策弹窗
  const showPolicy = ref(false)
  </script>
  
  <style scoped>
  .auth-container {
    max-width: 360px;
    margin: 80px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(80,80,120,0.10);
    padding: 32px 28px 24px 28px;
  }
  .auth-tabs {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
  }
  .auth-tabs span {
    font-size: 1.2em;
    cursor: pointer;
    padding: 6px 18px;
    border-radius: 8px 8px 0 0;
    color: #888;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }
  .auth-tabs .active {
    color: #4f46e5;
    border-bottom: 2px solid #4f46e5;
    font-weight: 600;
    background: #eef2ff;
  }
  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .auth-form input[type='text'],
  .auth-form input[type='password'],
  .auth-form input[type='email'] {
    padding: 10px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1em;
    transition: border 0.2s;
  }
  .auth-form input:focus {
    border-color: #4f46e5;
    outline: none;
  }
  .auth-form button {
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 0;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }
  .auth-form button:disabled {
    background: #bdbdfc;
    cursor: not-allowed;
  }
  .privacy {
    font-size: 0.98em;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .privacy a {
    color: #4f46e5;
    text-decoration: underline;
    cursor: pointer;
  }
  .auth-tip {
    color: #ef4444;
    font-size: 0.98em;
    margin-top: -8px;
  }
  .policy-modal-mask {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.18);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .policy-modal {
    background: #fff;
    border-radius: 12px;
    min-width: 320px;
    max-width: 90vw;
    padding: 28px 24px 18px 24px;
    box-shadow: 0 8px 32px rgba(80,80,120,0.18);
  }
  .policy-content {
    font-size: 1em;
    color: #444;
    margin-bottom: 18px;
    line-height: 1.7;
  }
  .policy-modal button {
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 24px;
    font-size: 1em;
    cursor: pointer;
  }
  </style>